<template>
	<view class="container">
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">商户详情</block>
		</cu-custom>

		<view class="bg-top bg-blue">
			<view class="top-box shadow">
				<view class="qh-pic cu-avatar xl" style="border-radius:20rpx; background-image:url(https://mini.wm-mis.com/img/static/merchant1.jpeg)"></view>
				<view class="qh-title text-bold text-blue text-xl">
					<text>{{ merchantDetail.name }}～</text>
				</view>

				<!-- :class="[menuBorder?'sm-border':'',menuCard?'card-menu margin-top':'']" -->
				<view class="cu-list menu">
					<view class="cu-item" style="padding: 0;">
						<view class="content margin-top" style="display: flex; justify-content: flex-start;">
							<text class="cuIcon-locationfill text-red margin-right-xs"></text>
							<text class="text-black text-bold"
								style="min-width: 290rpx; text-align: left;">{{ merchantDetail.provinceText ? merchantDetail.provinceText : '' }}{{ merchantDetail.cityText ? merchantDetail.cityText : '' }}{{ merchantDetail.cityText ? merchantDetail.cityText : '' }}{{ merchantDetail.address ? merchantDetail.address : '' }}</text>
						</view>
					</view>

					<view class="cu-item" style="padding: 0;">
						<view class="content">
							<text class="cuIcon-text text-red"></text>
							<text class="text-black">营业执照</text>
						</view>
						<view class="action">
							<view class="cu-tag round bg-blue light">{{ merchantDetail.licenseNumber ? merchantDetail.licenseNumber : '' }}</view>
						</view>
					</view>
					
					<view class="cu-item" style="padding: 0;">
						<view class="content">
							<text class="cuIcon-hotfill text-orange"></text>
							<text class="text-black">营业状态</text>
						</view>
						<view class="action">
							<view class="cu-tag round bg-orange light">{{ param.status_dictText }}</view>
						</view>
					</view>
					
					<view class="cu-item" style="padding: 0;">
						<view class="content">
							<text class="cuIcon-taoxiaopu text-olive"></text>
							<text class="text-black">所属行业</text>
						</view>
						<view class="action">
							<view class="cu-tag round bg-blue light">{{ param.industry_dictText }}</view>
						</view>
					</view>
					
					<view class="cu-item" style="padding: 0;" v-if="param.shouyunCompany">
						<view class="content">
							<text class="cuIcon-shop text-olive"></text>
							<text class="text-black" style="font-size: 28rpx;">隔油池清捞单位</text>
						</view>
						<view class="action">
							<view class="cu-tag round bg-blue light">{{ shouyunCompanyLabel(param.shouyunCompany) }}</view>
						</view>
					</view>
					
					<view class="bxBox">
						<text class="bxImg cuIcon-selectionfill text-pink"></text>
						<view class="title text-black">商户备注</view>
					</view>
					
					<view class='padding-bottom-sm padding-left-sm bg-white'>{{ merchantDetail.remark ? merchantDetail.remark : '~' }}</view>
				</view>
			</view>
			
			<!-- 合同列表 -->
			<view class="center-box shadow">
				<view class="cu-list menu">
					<view class="cu-bar bg-white margin-top-xs u-border-bottom">
						<view class="action sub-title">
							<text class="text-xl text-bold text-blue text-shadow">合同列表</text>
							<text class="text-ABC text-blue">CONTRACT</text>
						</view>
						<view class="action" style="margin-right: 0px;">
							<button class="cu-btn bg-blue sm" @click="addContract">新增</button>
						</view>
					</view>
					<view v-if="merchantDetail && merchantDetail.wvpContracts.length == 0" class="padding text-center text-grey">暂无数据</view>
					<view v-if="merchantDetail && merchantDetail.wvpContracts.length > 0" class="cu-item arrow" style="padding: 0;" v-for="(item, index) in merchantDetail.wvpContracts" :key="item.id" @click="toUpdateContract(item.id)">
						<view class="content">
							<text class="cuIcon-copy text-brown"></text>
							<text class="text-df">{{ item.contractName }}</text>
						</view>
						<view class="action">
							<view  class="cu-tag radius bg-blue light">
								{{item.beginDate}}--{{item.endDate}}
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 法人信息 -->
			<view class="center-box shadow">
				<view class="cu-list menu">
					<view class="cu-bar bg-white margin-top-xs u-border-bottom">
						<view class="action sub-title">
							<text class="text-xl text-bold text-blue text-shadow">法人信息</text>
							<text class="text-ABC text-blue">OwnerTel</text>
						</view>
					</view>
					<view class="cu-item" style="padding: 0;">
						<view class="content">
							<text class="cuIcon-myfill text-blue"></text>
							<text class="text-lg">姓名</text>
						</view>
						<view class="action">
							<text class="text-grey text-sm">{{ merchantDetail.contact ? merchantDetail.contact : '' }}</text>
						</view>
					</view>

					<view class="cu-item" style="padding: 0;">
						<view class='content'>
							<text class="cuIcon-mobilefill text-blue"></text>
							<text class='text-lg'>联系方式</text>
						</view>
						<view class="action">
							<view class="cu-tag round bg-blue light">{{ merchantDetail.mobile ? merchantDetail.mobile : '' }}</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 加入按钮 -->
			<view class="padding-lr flex margin-top-sm" style="justify-content: space-between;">
				<button class="cu-btn bg-blue margin-top-sm lg" style="width: 48%;" @click="submitClick">切换到当前商户</button>
				<button class="cu-btn bg-yellow margin-top-sm lg" style="width: 48%;" @click="toEditMerchant">编辑商户</button>
			</view>
			<u-gap height="20"></u-gap>
			<!-- 加载弹窗 -->
			<view class="cu-load load-modal" v-if="loading">
				<!-- <view class="cuIcon-emojifill text-orange"></view> -->
				<image src="https://mini.wm-mis.com/img/static/car.png" mode="aspectFit" class="round"></image>
				<view class="gray-text">加载中...</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/api/api'
	import {
		mapState
	} from 'vuex';
	
	export default {
		computed: {
			...mapState([
				'merchant',
				'dicts'
			])
		},
		data() {
			return {
				param: null,
				merchantDetail: null,
				id: null,
				loading: false
			}
		},
		async onLoad(options){
			this.param = JSON.parse(options.item)
			this.id = this.param.id
			await this.getMerchantDetail();
		},
		async onShow(options){
			let entryDetail = uni.getStorageSync('entryDetail')
			if(entryDetail == 'merchantDetail'){
				//如果是从商户编辑完过来
				await this.getMerchantDetail();
			}
			else if(entryDetail == 'contractDetail'){
				//如果是从合同编辑完过来
				await this.getMerchantDetail();
			}
		},
		methods: {
			submitClick(){
				this.$store.dispatch('setMerchant', {
					merchant: {
						name: this.merchantDetail.name,
						id: this.merchantDetail.id,
						orgCode: this.merchantDetail.orgCode
					}
				});
				
				uni.showToast({
					title: '切换成功',
					icon: 'success',
					duration: 1500
				})
				setTimeout(()=>{
					uni.navigateBack();
				}, 1500)
			},
			async getMerchantDetail(){
				let that = this
				that.loading = true
				let res = await api.shopDetailNoAuth({
					id: that.id
				})
				if(res.data.code == 200 && res.data.success){
					that.merchantDetail = res.data.result
				}
				that.loading = false
			},
			toEditMerchant(){
				uni.navigateTo({
					url: '/pages/merchants/input?item='+JSON.stringify(this.merchantDetail)
				})
			},
			addContract(){
				uni.navigateTo({
					url: '/pages/merchants/updateContract?shopId='+this.id
				})
			},
			toUpdateContract(contractId){
				uni.navigateTo({
					url: '/pages/merchants/updateContract?shopId='+this.id + '&id=' + contractId
				})
			},
			shouyunCompanyLabel(val){
				let text;
				for(let item of this.dicts.shouyun_company){
					if(item.value == val){
						text = item.label
						break
					}
				}
				return text
			}
		}
	}
</script>
<style lang="scss" scoped>
	.container {
		width: 750rpx;
		color: #333333;

		.bg-top {
			margin-top: -1rpx;
			width: 750rpx;
			height: 220rpx;
			padding-top: 50rpx;
			border-radius: 0 0 20% 20%;

			.top-box {
				width: 700rpx;
				background-color: #FFFFFF;
				margin: 0 auto;
				border-radius: 20rpx;
				padding: 20rpx 30rpx 0rpx;
				position: relative;

				.qh-pic {
					position: absolute;
					right: 64rpx;
					top: -50rpx;
					border-radius: 12rpx;
				}

				.qh-title {
					width: 100%;
					height: 60rpx;
					line-height: 65rpx;
					padding-right: 190rpx;
				}

				.bxBox {
					position: relative;
					display: flex;
					/* padding: 0 30rpx; */
					min-height: 100rpx;
					/* background-color: #ffffff; */
					/* justify-content: space-between; */
					align-items: center;
					font-size: 30rpx;
					line-height: 1.6em;
					flex: 1;

					.bxImg {
						display: inline-block;
						margin-right: 10rpx;
						width: 1.6em;
						text-align: center;
					}
				}

			}
		}

		.center-box {
			color: #333333;
			width: 700rpx;
			background-color: #FFFFFF;
			margin: 0 auto;
			border-radius: 20rpx;
			padding: 0rpx 30rpx 0rpx;
			position: relative;
			margin-top: 20rpx;
		}
	}
</style>
